<script setup lang="ts">
import { inject, onMounted, nextTick, ref } from 'vue'
import { swiperTs, tabs } from './MainT.ts'
import { Tab, Tabs, PullRefresh, showToast, List } from 'vant';
import { useRouter } from 'vue-router'
let $axios: any = inject('$axios')
let useSwiperData: any = swiperTs()
let useTabs: any = tabs()
let useTab: any = ref([])
let router = useRouter()
onMounted(() => {
    // tabReq()
})
function tabReq() {
    $axios.get(`/tab`).then((res: { data: any; }) => {
        useTab.value = res.data
    })
}
function jump(v: string, date: string) {
    router.push({ path: '/particulars', query: { title: v, date: date } })
}

let active = ref<string>('')
const loading = ref(false);
const pullLoading = ref(false)

const finished = ref(false);

const onLoad = () => {

    if (useTab.value.length < 100) {
        $axios.get(`/tab`).then((res: { data: any[]; }) => {
            res.data.forEach((v: any) => useTab.value.push(v))
        })
        loading.value = false;
    } else {
        finished.value = true;
    }
};

const onRefresh = async () => {
    // 清空列表数据
    finished.value = false;

    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    loading.value = true;
    useTab.value = []
    await onLoad();
    pullLoading.value = false

};


</script>


<template>
    <van-pull-refresh v-model="pullLoading" @refresh="onRefresh">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <div>
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                    <van-swipe-item v-for="(item, i) in useSwiperData" :key="i">
                        <div><img :src="item.img" alt=""></div>
                        <p>{{ item.title }}</p>
                    </van-swipe-item>
                </van-swipe>
            </div>
            <div>
                <van-tabs v-model:active="active" @change="tabReq">
                    <van-tab v-for="(v, i) in useTabs" :title="v.tab" :key="i">
                        <div v-for="(vv) in useTab" :key="vv" @click="jump(vv.content, vv.date)">
                            <div>
                                <img :src="vv.img" alt="">
                            </div>
                            <div>
                                <div>{{ vv.content }}</div>
                                <div>
                                    <div>
                                        <i class="iconfont icon-yanjing"></i>
                                        <span>0</span>
                                    </div>
                                    <div>{{ vv.date }}</div>
                                </div>
                            </div>
                        </div>
                    </van-tab>
                </van-tabs>
            </div>
        </van-list>
    </van-pull-refresh>
</template>


<style lang="less">
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
}

.van-swipe-item {
    >div {
        height: 100%;

        >img {
            width: 100%;
            height: 100%;
        }
    }

    >p {
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 10px;
        text-align: center;
    }
}

.van-tabs__nav {
    padding: 8px 0;
}

.van-tab__panel {
    padding: 10px 0;

    >div {
        display: flex;
        justify-content: space-between;
        margin: 15px 0;

        >div:nth-child(1) {
            width: 30%;
            overflow: hidden;

            >img {
                width: 100%;
                border-radius: 10px;
            }
        }

        >div:nth-child(2) {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0 10px;
            font-size: 18px;

            >div:nth-child(2) {
                display: flex;
                justify-content: space-between;

                >div:nth-child(1) {
                    display: flex;
                    align-items: center;
                    color: #f99858;
                    font-size: 12px;
                }

                >div:nth-child(2) {
                    color: #999;
                    font-size: 13px;
                }
            }
        }
    }
}</style>